<template>
  <div class="outer">
    <header>
      <div class="title">筛选条件:</div>
      <div class="btnList">
        <label>
          收货人:<el-input
            v-model="acceptP"
            placeholder="姓名手机号"
            clearable
          />
        </label>
        <label>
          订单编号:<el-input
            v-model="orderItem"
            placeholder="订单编号"
            clearable
          />
        </label>
        <label>
          订单状态:
          <el-select v-model="orderStatus" clearable placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </label>
        <el-button type="primary" @click="search"> 查询 </el-button>
      </div>
    </header>
    <main>
      <el-table
        :data="nowData"
        style="width: 100%"
        :header-cell-style="{
          background: '#438ACA',
          color: '#ffffff',
          textAlign: 'center',
        }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="order_id" label="订单编号" width="180" />
        <el-table-column
          prop="goods_name"
          label="商品名称"
          min-width="180"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="goods_num" label="数量" width="160" />
        <el-table-column prop="order_price" label="支付金额" width="160" />
        <el-table-column prop="order_jf" label="支付积分" width="160" />
        <el-table-column prop="paytype" label="支付方式" width="160" />
        <el-table-column prop="user" label="收件人" width="160" />
        <el-table-column label="状态" width="180">
          <template #default="scope">
            <el-button
              type="danger"
              @click="show(scope.row)"
              v-if="scope.row.status == 2 && scope.row.closeIf == 0"
              >待发货</el-button
            >
            <el-button
              type="primary"
              plain
              disabled
              @click="show(scope.row)"
              v-if="scope.row.status == 0"
              >已退款</el-button
            >
            <el-button
              type="warning"
              v-if="scope.row.status == 3 && scope.row.closeIf == 0"
              >待收货</el-button
            >
            <el-button
              type="success"
              v-if="scope.row.status == 4 && scope.row.closeIf == 0"
              >已完成</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 1 && scope.row.closeIf == 0"
              >待付款</el-button
            >
            <el-button type="info" v-if="scope.row.closeIf == 1"
              >关闭</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="chakan(scope.row)">查看</el-button>
            <el-button @click="close(scope.row)">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bot" style="margin-top: 1rem">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="pageMax"
          @current-change="changePage"
        />
        <span style="line-height: 36px"
          >共<span style="color: red">{{ pageMax }}</span
          >页/<span style="color: red">{{ pageNumber }}</span
          >条数据</span
        >
      </div>
    </main>
  </div>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" title="发货" width="30%">
    <div class="alertMain">
      <el-select
        v-model="expressCompany"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item1 in expressOption"
          :key="item1.value"
          :label="item1.label"
          :value="item1.value"
        />
      </el-select>
      <el-input
        v-model="yundanitem"
        placeholder="填写运单号"
        id="yundan"
        style="width: 12rem; height: 38px"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="fahuo">发货</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import http from "../utils/request";
import { ElMessage } from "element-plus";
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      acceptP: "",
      orderItem: "",
      orderStatus: "",
      dialogVisible: false,
      fahuoData: [],
      expressCompany: "选择物流公司",
      yundanitem: "",
      options: [
        {
          value: 1,
          label: "待付款",
        },
        {
          value: 2,
          label: "待发货",
        },
        {
          value: 3,
          label: "待收货",
        },
        {
          value: 4,
          label: "已完成",
        },
      ],
      expressOption: [
        {
          value: "EMS",
          label: "EMS",
        },
        {
          value: "顺丰",
          label: "顺丰",
        },
        {
          value: "京东",
          label: "京东",
        },
      ],
      tableData: [
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "待发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "待发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "待发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已发货",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已完成",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已关闭",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已完成",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已完成",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已关闭",
        },
        {
          item: "JF202107100000158",
          name: "1000元京东电子卡1000元京东电子卡1000元京东电子卡1000元京东电子卡",
          num: 1,
          cash: 60,
          jifen: 100,
          payway: "全积分",
          acceptP: "宗文豹",
          status: "已关闭",
        },
      ],
      nowPage: 1,
      nowData: computed(() => {
        let start = (data.nowPage - 1) * 10;
        return data.tableData.slice(start, start + 10);
      }),
      pageMax: computed(() => {
        return Math.ceil(data.tableData.length / 10);
      }),
      pageNumber: computed(() => data.tableData.length),
      chakan: (row) => {
        router.push({ name: "orderDetails", params: row });
      },
      changePage: (page) => {
        data.nowPage = page;
      },
      show(row) {
        data.dialogVisible = true;
        data.fahuoData = row;
      },
      getAllData() {
        http({
          url: "/getData",
        }).then((res) => {
          res.data.data.map((item) => {
            item.closeIf = 0;
          });
          data.tableData = res.data.data;
        });
      },
      search() {
        // console.log(data.acceptP);
        // parseInt(data.acceptP) == parseInt(data.acceptP)
        //acceptP为手机号
        http({
          url: "/mulitSearch",
          method: "GET",
          params: {
            acceptP: data.acceptP,
            orderItem: data.orderItem,
            orderStatus: data.orderStatus,
          },
        }).then((res) => {
          res.data.data.map((item) => {
            item.closeIf = 0;
          });
          data.tableData = res.data.data;
        });
      },
      close(data) {
        data.closeIf = 1;
      },
      fahuo() {
        let id = data.fahuoData.id;
        let company = data.expressCompany;
        let distr_num = data.yundanitem;
        http({
          url: "/fahuo",
          method: "POST",
          data: {
            id,
            company,
            distr_num,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              message: "发货成功",
              type: "warning",
              duration: 1000,
            });
            data.getAllData();
            data.dialogVisible = false;
          }
        });
      },
    });
    //生命周期函数
    onMounted(() => {
      data.getAllData();
    });
    return { ...toRefs(data) };
  },
};
</script>

<style scoped>
#yundan {
  width: 0;
}
.el-input {
  width: 10%;
  margin: 0 1rem;
}
header {
  border: 1px solid #f0f0f0;
  margin-bottom: 2%;
}
.el-button {
  margin-left: 3%;
}
.title,
.btnList {
  padding-left: 1%;
  line-height: 3rem;
}
.bot {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.el-pagination {
  margin-right: 10rem;
}
.outer {
  height: 100%;
  background: #ffffff;
  padding: 0 1rem;
  padding-top: 1rem;
  font-size: 10px;
}
.title {
  background: #f2f2f2;
}
.el-table .cell {
  /* width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap; */
  background: red;
}
</style>
